<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'供应商档案',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright">
					<view class="add" @click="jumpurl('/pages/workbench/jiben/gongyingsdaadd',11)"></view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="flexleft">
				<view class="flexbetween searchbox margin_right">
					<input type="text" placeholder="输入供货商" v-model="keywords" confirm-type="search" @confirm="init()">
					<view class="searchimg" style="margin: 0;"></view>
				</view>
				<uni-data-picker :localdata="items" placeholder="请选择供应商片区" popup-title="请选择供应商片区" v-model="pq_area_id"
					@change="bindPickerChange1">
					<view class="flexbetween searchbox margin_right" style="width: 90%;box-sizing: border-box;">
						<input type="text" placeholder="点击选择片区" disabled="true" v-model="area1">
						<view class="righticon2"></view>
					</view>
				</uni-data-picker>
				<view class="flexbetween searchbox margin_right" @click="gysHangYeShow = true">
					<input type="text" placeholder="点击选择行业" disabled="true" v-model="gysHangYeText">
					<view class="righticon2"></view>
				</view>

			</view>
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="margin_top strongtext" v-if="list.total">共计：{{list.total}}个</view>
			<view class="ffffff mainpadding margin_top radius itembox" v-for="item in list.data" :key="item.id"
				@click="selectRole(item)">
				<view class="flexbetween">
					<view class="titletext">{{item.name}}</view>
					<view class="nostrongtext">{{item.gh_goods}}</view>
				</view>
				<view class="flexleft margin_top">
					<view class="xiaohui">联系方式：</view>
					<view class="xiaolan">{{item.username}} {{item.mobile}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft xiaohui">
						<view class="margin_right">余额：
							<text class="xiaolv">{{item.yfk_money}}</text>
						</view>
						<view>欠款：
							<text style="color: #ff0000;">{{item.qk_money}}</text>
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view class="smalltext">地址：{{item.address}}</view>
						<!-- 需要转换 -->
						<view class="addresstext">{{kmUnit(Number(item.distance))}}</view>
					</view>
					<view class="flexright">
						<view class="addressicon margin_right" @click.stop="openmap(item)"></view>
						<view class="phoneicon" @click.stop="phone(item.mobile)"></view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="xiaolankuang flexbetween" v-if="item.manystoreshop" @click.stop="dinghuo(item.manystoreshop)">
						<u-icon name="car" color="#0BBDCB" size="16"></u-icon>
						<view class="xiaolan margin_left1">订货</view>
					</view>
					<view class="xiaolankuang flexbetween margin_left2"
						@click.stop="edit('/pages/workbench/jiben/gongyingsdaadd?id=',item.id,12)">
						<u-icon name="edit-pen" color="#0BBDCB" size="16"></u-icon>
						<view class="xiaolan margin_left1">编辑</view>
					</view>
					<view class="xiaolankuang flexbetween margin_left2" @click.stop="delItem(item.id,13)">
						<u-icon name="trash" color="#0BBDCB" size="16"></u-icon>
						<view class="xiaolan margin_left1">删除</view>
					</view>
				</view>
			</view>
		</view>
		<selectGYSHangYe :message="{gysHangYeShow:gysHangYeShow}" @gysHangYeSure="gysHangYeSure"></selectGYSHangYe>
		<!-- 行业 -->
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				currentId: "",
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
				pq_province_id: "",
				pq_city_id: "",
				pq_area_id: "",
				// 供应商行业
				gysHangYeShow: false,
				gysHangYeText: "",
				industry_id: "", //行业id
				lat: "35.17466",
				lng: "109.67307",
				items: [],
				area1: "",
				type: 0,
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			this.items = JSON.parse(JSON.stringify(citys.data))
		},
		onShow() {
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.init()
			// #endif
		},
		methods: {
			dinghuo(item) {
				plus.share.getServices(
					res => {
						let sweixin = null;
						for (let i in res) {
							if (res[i].id == 'weixin') {
								sweixin = res[i];
							}
						}
						//唤醒微信小程序
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: item.wxmini_ysid, //微信开放平台 --- 绑定的微信小程序的 --- 原始id
								type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
								path: 'pages/index/index' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
							});
						} else {
							console.log("未安装微信逻辑")
						}
					}
				);
			},
			selectRole(item) {
				if (this.type == 1) {
					let e = {
						id: item.id,
						name: item.name,
						yfk_money: item.yfk_money,
						qk_money: item.qk_money

					}
					uni.$emit("gysSelectFn", e)
					uni.navigateBack(1)
				} else {
					this.edit('/pages/workbench/jiben/gongyingsdaadd?id=', item.id, 12)
				}
			},
			delItem(id, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				this.modal.modalShow = true
				this.modal.title = "确定删除当前内容吗"
				this.currentId = id
			},
			modalSure() {
				httpRequest.request('/dhtapi/Supplier/deleteSupplier', 'POST', {
					id: this.currentId
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			gysHangYeSure(e) {
				if (e) {
					this.gysHangYeText = e.value[0].name
					this.industry_id = e.value[0].id
				}
				this.gysHangYeShow = false
				this.init()
			},
			// 获取当前位置信息
			getlocation() {
				let _this = this
				uni.showLoading({
					title: "请稍候"
				})
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						console.log(err, "定位错误信息")
						uni.hideLoading()
					}
				});
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/dhtapi/Supplier/index', 'POST', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					lng: this.lng,
					lat: this.lat,
					pq_province_id: this.pq_province_id,
					pq_city_id: this.pq_city_id,
					pq_area_id: this.pq_area_id,
					industry_id: this.industry_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
					uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			bindPickerChange1(val) {
				let area1 = val.detail.value
				let arr = [area1[0].text, area1[1].text, area1[2].text];
				this.area1 = arr.join()
				this.pq_province_id = area1[0].value;
				this.pq_city_id = area1[1].value;
				this.pq_area_id = area1[2].value;
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.address, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			jumpurl(url, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			phone(p) {
				console.log(88888, "打电话")
				uni.makePhoneCall({
					phoneNumber: p.toString(),
					success(ress) {
						console.log("拨打电话成功", ress)
					},
					fail(err) {
						console.log("拨打电话失败", err)
					}

				})
			},
			// 编辑
			edit(url, val, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url: url + val
				})
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 顶部搜索
	.searchimg {
		width: 24rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
	}

	.searchbox {
		width: 35%;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-radius: 50rpx;

		input {
			width: 85%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.smalltext {
		width: 300rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bigtextco {
		color: #0BBDCB;
	}
</style>